<!--  -->
<template>
    <el-menu router   class="el-menu-vertical-demo">

  
        <el-sub-menu :index="item.id" v-for="item in menus">
            <template #title>
                <span class="icon iconfont" :class="item.icon"></span>
                <span>{{item.name}}</span>
            </template>

            <el-menu-item   v-for="subItem in item.children" :index="`/${item.url}/${subItem.url}`">
            
                {{ subItem.name }}
            
            </el-menu-item>
       

        </el-sub-menu>

 
    </el-menu>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import { useAuthStore } from '../../store/authStore'
import { TreeNode } from '../../utils/treeUtil';

const store=useAuthStore();

const menus = ref<TreeNode[]>([]);

onMounted(async ()=>{

  await  store.getMenu();
  menus.value=store.menus;

   
})




</script>
<style scoped>
.icon-set{
    font-size: 22px;
}
.icon-jigou{
    font-size: 14px;
}
</style>